<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'

  defineOptions({
    name: 'CustomTitle9',
  })

  const props = defineProps({
    title: {
      type: String,
      default: () => '这是标题',
    },
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    desc: {
      type: String,
      default: () => '',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
  })

  const titleStyle = computed<CSSProperties>(() => {
    return {
      fontWeight: 600,
      height: '100%',
      lineHeight: '28px',
      maxWidth: '54%',
      minWidth: '10%',
      padding: '0 1px',
      textAlign: 'center',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      color: props.titleColor,
      backgroundColor: props.dividerColor,
    }
  })

  const leftBlockStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      bottom: '0',
      position: 'absolute',
      right: '-1px',
      top: '0',
      width: '53px',
    }
  })

  const leftTriangleStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      height: '20px',
      position: 'absolute',
      right: '52px',
      top: 0,
      transform: 'rotate(-45deg)',
      transformOrigin: '100% 0',
      width: '20px',
    }
  })

  const leftSquareStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: '#fff',
      height: '10px',
      position: 'absolute',
      right: '45px',
      top: '9px',
      transform: 'rotate(45deg)',
      width: '10px',
    }
  })

  const leftLine1Style = computed<CSSProperties>(() => {
    return {
      borderTop: `1px solid ${props.dividerColor}`,
      height: '0',
      left: '27px',
      position: 'absolute',
      top: '9px',
      width: '48px',
    }
  })

  const leftLine2Style = computed<CSSProperties>(() => {
    return {
      borderTop: `1px solid ${props.dividerColor}`,
      bottom: '8px',
      height: '0',
      left: '0',
      position: 'absolute',
      width: '75px',
    }
  })

  const rightBlockStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      bottom: '0',
      position: 'absolute',
      left: '-1px',
      top: '0',
      width: '53px',
    }
  })

  const rightTriangleStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      height: '20px',
      left: '52px',
      position: 'absolute',
      top: 0,
      transform: 'rotate(45deg)',
      transformOrigin: '0 0',
      width: '20px',
    }
  })

  const rightSquareStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: '#fff',
      height: '10px',
      left: '45px',
      position: 'absolute',
      top: '9px',
      transform: 'rotate(45deg)',
      width: '10px',
    }
  })

  const rightLine1Style = computed<CSSProperties>(() => {
    return {
      borderTop: `1px solid ${props.dividerColor}`,
      height: '0',
      position: 'absolute',
      right: '27px',
      top: '9px',
      width: '48px',
    }
  })

  const rightLine2Style = computed<CSSProperties>(() => {
    return {
      borderTop: `1px solid ${props.dividerColor}`,
      bottom: '8px',
      height: '0',
      right: '0',
      position: 'absolute',
      width: '75px',
    }
  })
</script>

<template>
  <div class="custom-title9">
    <div class="title-container">
      <div class="left-wrapper">
        <div class="left-block" :style="leftBlockStyle"></div>
        <div class="left-triangle" :style="leftTriangleStyle"></div>
        <div class="left-square" :style="leftSquareStyle"></div>
        <div class="left-line1" :style="leftLine1Style"></div>
        <div class="left-line2" :style="leftLine2Style"></div>
      </div>
      <div class="title" :style="titleStyle">{{ props.title }}</div>
      <div class="right-wrapper">
        <div class="right-block" :style="rightBlockStyle"></div>
        <div class="right-triangle" :style="rightTriangleStyle"></div>
        <div class="right-square" :style="rightSquareStyle"></div>
        <div class="right-line1" :style="rightLine1Style"></div>
        <div class="right-line2" :style="rightLine2Style"></div>
      </div>
    </div>
    <div v-if="props.desc" class="desc">{{ props.desc }}</div>
  </div>
</template>

<style scoped lang="scss">
  .custom-title9 {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .title-container {
      width: 100%;
      position: relative;
      height: 28px;
      display: flex;
      justify-content: center;

      .left-wrapper,
      .right-wrapper {
        width: 151px;
        position: relative;
        flex: none;
      }
    }

    .desc {
      color: gray;
    }
  }
</style>
